<template>
  <div class="icon-and-download-block">
    <div class="my-icon">
      <el-image :src="icon"/>
    </div>
    <div class="name-and-download">
      <div class="my-name">{{ props.name }}</div>
      <div class="my-illustrate">{{ illustrate }}</div>
      <el-button @click="enterDownload" :disabled="disableButton">{{ firstButton }}</el-button>
      <el-button @click="enterPreview">文档预览</el-button>
    </div>
  </div>
</template>

<script setup>
import eventBus from '@/utils/event_bus'
import {ref,onMounted} from 'vue'
const props = defineProps({
  name: String,
  illustrate: String,
  icon: String,
  url: {
    type: String,
    default: ''
  },
  type: Number,
  docId:Number
})
const enterPreview = () => {
  eventBus.emit('jumpToPreview', {docId:props.docId, type:props.type})
}

const firstButton=ref('源码')
const disableButton = ref(props.url === "http://10.1.1.59:8088/" || props.url === "" || !props.url);

const checkFirstButton = () => {
  if (props.url !== "" && props.url){
    if (!props.url.startsWith("http://10.1.1.59")){
      firstButton.value = '官网'
    }
  }
}
const enterDownload = () => {
  window.open(props.url, '_blank')
}
onMounted(() => {
  checkFirstButton();
});
</script>
<style scoped>
.icon-and-download-block {
  height: 11rem;
  display: flex;
}

.my-icon {
  margin-right: 2.4rem;
  width: 13rem;
  height: 11rem;
}

.my-name {
  font-weight: 500;
  font-size: 2rem;
}

.my-illustrate {
  margin-top: 0.8rem;
  color: var(--el-text-color-secondary);
  font-size: 1.4rem;
  max-width: 80%;
}

.el-button {
  margin-top: 1.8rem;
  font-size: 1rem;

}
.name-and-download{
  width: 100%;
}
</style>
